<script setup lang="ts">
import China from "@/components/China.vue";
import lineChart from "@/components/lineChart.vue";
import Law_case from "@/components/law_case.vue";
import Neo4jExample from "@/components/Neo4jExample.vue";
import AIChat from "@/components/AIChat.vue";
import Detail from "@/components/detail.vue";
import { getContent } from "@/apis/content.ts";
import { ref, onMounted } from "vue";
import { useTurnStore } from "@/stores/turn.ts";
import type { Case, ResponseData } from "@/interface/interface";

// 定义地区简称映射对象
const regionMap: { [key: string]: string } = {
  "广西壮族自治区": "广西",
  "内蒙古自治区": "内蒙古",
  "新疆维吾尔自治区": "新疆",
  "宁夏回族自治区": "宁夏",
  "北京市": "北京",
  "天津市": "天津",
  "上海市": "上海",
  "重庆市": "重庆",
  "西藏自治区": "西藏",
};

const provinceData = ref([
  { name: '北京', value: 0, data: [] as Case[] },
  { name: '上海', value: 0, data: [] as Case[] },
  { name: '广东', value: 0, data: [] as Case[] },
  { name: '江苏', value: 0, data: [] as Case[] },
  { name: '浙江', value: 0, data: [] as Case[] },
  { name: '山东', value: 0, data: [] as Case[] },
  { name: '河南', value: 0, data: [] as Case[] },
  { name: '四川', value: 0, data: [] as Case[] },
  { name: '湖北', value: 0, data: [] as Case[] },
  { name: '湖南', value: 0, data: [] as Case[] },
  { name: '河北', value: 0, data: [] as Case[] },
  { name: '安徽', value: 0, data: [] as Case[] },
  { name: '福建', value: 0, data: [] as Case[] },
  { name: '陕西', value: 0, data: [] as Case[] },
  { name: '江西', value: 0, data: [] as Case[] },
  { name: '辽宁', value: 0, data: [] as Case[] },
  { name: '云南', value: 0, data: [] as Case[] },
  { name: '广西', value: 0, data: [] as Case[] },
  { name: '山西', value: 0, data: [] as Case[] },
  { name: '黑龙江', value: 0, data: [] as Case[] },
  { name: '重庆', value: 0, data: [] as Case[] },
  { name: '吉林', value: 0, data: [] as Case[] },
  { name: '贵州', value: 0, data: [] as Case[] },
  { name: '天津', value: 0, data: [] as Case[] },
  { name: '甘肃', value: 0, data: [] as Case[] },
  { name: '海南', value: 0, data: [] as Case[] },
  { name: '宁夏', value: 0, data: [] as Case[] },
  { name: '青海', value: 0, data: [] as Case[] },
  { name: '新疆', value: 0, data: [] as Case[] },
  { name: "内蒙古", value: 0, data: [] as Case[] },
  { name: '西藏', value: 0, data: [] as Case[] }
]);

const turnStore = useTurnStore();

const getData = async () =>
{
  await getContent({
    pageNum: 1,
    pageSize: 10000,
  }).then((res) => {
    turnStore.over = true
    turnStore.allData = res.data.data;
    console.log(turnStore.over, turnStore.allData);
  });

  turnStore.allData.forEach(item => {
    const provinceValue = provinceData.value.find(province => province.name === (regionMap[item.region] || item.region.replace("省", "")));
    if (provinceValue) {
      provinceValue.value += 1;
      provinceValue.data.push(item);
    }
  });
  turnStore.allProvinceData = provinceData.value;
}


onMounted(() => {
  new Promise(resolve => {
      resolve(getData());
  }).then(() => {
    turnStore.getData = true;
  });
})

</script>

<template>
<div class="home">
  <div class="col-1">
    <Neo4jExample />
    <lineChart />
  </div>
  <div class="col-2">
    <China />
    <Law_case />
  </div>
  <div class="col-3">
    <AIChat />
  </div>
  <Detail />
</div>
</template>

<style lang="scss">
.home {
	width: 99vw;
	height: 93vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
  transition: all 0.5s ease-in-out;
  position: relative;
	.col-1,
	.col-2,
	.col-3 {
    position: relative;
		display: flex;
		height: 100%;
    border: 3px solid #000;
    border-radius: 10px;
	}
  .col-1 {
    width: 22vw;
    display: flex;
    flex-direction: column;
  }
	.col-2 {
    //display: flex;
    //flex-direction: column;
		width: 56vw;
    display: grid;
    grid-template-rows: 1.3fr 1fr;
	}
  .col-3 {
    width: 19vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
